<template>
  <div class="login" v-loading="loading" element-loading-text="努力登录中,请稍等..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="haibei-login">
      <dl class="tc">
        <dt><img src="/static/images/logo.png" width="80" alt=""></dt>
        <dd class="mt10">
          <h3 class="white">个股期权代理商管理系统</h3>
        </dd>
      </dl>
      <div class="form mt20">
        <el-form ref="loginForm" :model="loginForm" :rules="rules">
          <el-form-item label="" prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入帐号"></el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input v-model="loginForm.password" type="password" @keyup.enter.native="onSubmitLogin('loginForm')" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitLogin('loginForm')" class="w-100">登录</el-button>
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="primary" @click="test('loginForm')" class="w-100">test</el-button>
          </el-form-item> -->
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import service from '@/service/index'
import { setCookie } from '@/assets/utils'

export default {
  name: 'login',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loading: false,
      rules: {
        username: [
          { required: true, message: '请输入帐号', trigger: 'blur,change' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur,change' },
        ]
      }
    };
  },
  methods: {
    onSubmitLogin(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          service.haiBeiServerLogin({
            username: this.loginForm.username,
            password: this.loginForm.password
          }).then(result => {
            if (result.success) {
              setCookie('userInfo', result.result);
              this.loading = true;
              console.log(result.result.auth)
              setCookie('31cb7911514b27_type', result.result.auth);
              setTimeout(() => {
                this.$router.push({ name: 'home' });
              }, 2000);



            } else {
              this.$message({
                type: 'error',
                message: result.msg
              })
            }
          });
        }

      })
    },

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background: #74aae6;
  background: url("/static/images/banner1-1.jpg") center center no-repeat;
  background-size: cover;
}

.haibei-login {
  width: 400px;
  padding: 25px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  box-shadow: 1px 1px 3px #666;
}
</style>
